<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS权重注意点</title>
    <style>
        /* father的权重为10 */
        .father {
            color: aqua;
        }

        /* p继承的权重为0 */
        /* 注意！！！ */
        /* 所以以后我们看到底执不执行那个样式，就先看这个1标签有没有直接被选出来，
        例如这里p直接写出来了，所以执行red */
        p {
            color: red;
        }

        body {
            /* 给body定义颜色，a标签不受影响 */
            color: rgb(28, 116, 34);
        }

        /* 原因是：a链接浏览器单独默认制定了一个样式 蓝色的 有下划线 a {color: blue; text-decoration: underline;} */
        /* 如果想改变a标签文字的颜色，就单独写出来 */
        a {
            color: black;
            text-decoration: none;
        }
    </style>

</head>

<body>
    <div class="father">
        <p>你笑起来真好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

</html>